import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { EmailLoginWrapper } from './style';
import { Button, Form, Input } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { emailLoginByPassword } from '../../service/login';
interface IProps {
  children?: ReactNode;
  setStatus: (val: string) => void;
  setOpen: () => void;
}

const EmailLogin: FC<IProps> = (props) => {
  const [form] = Form.useForm();
  const { setStatus, setOpen } = props;
  async function handleLogin() {
    const value = form.getFieldsValue();
    const res = await emailLoginByPassword(value);
    if (res.data.code === 200) {
      setOpen();
    }
  }
  return (
    <EmailLoginWrapper>
      <div className="content">
        <Form name="login" style={{ maxWidth: 360 }}>
          <Form.Item name="email" rules={[{ required: true, message: '请输入邮箱地址' }]}>
            <Input prefix={<UserOutlined />} placeholder="请输入邮箱地址" />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: '请输入邮箱登录密码' }]}>
            <Input prefix={<LockOutlined />} type="password" placeholder="请输入邮箱登录密码" />
          </Form.Item>
        </Form>
        <a href="javascript:void(0)" className="login-btn" onClick={handleLogin}>
          登录
        </a>
        <div className="forget">
          <a href="https://id.163.com/mail/retrievepassword?pd=music&pkid=KGxdbOk#/verifyAccount">忘记密码?</a>
        </div>
      </div>
      <div className="another-login">
        <a
          href="javascript:void(0)"
          onClick={() => {
            setStatus('another');
          }}
        >
          {'<  其他登录方式'}
        </a>
      </div>
    </EmailLoginWrapper>
  );
};

export default memo(EmailLogin);
